<template>
  
    <el-container class="fullBody">
      <el-aside v-show="isCollapse" width="8em">
        <el-menu default-active="1" class="el-menu-vertical-demo" :router="true">
          <el-menu-item index="1-1" :route="{ name: RouterName.UserSet }">
            <i class="el-icon-map-location"></i>
            <span>用户信息</span>
          </el-menu-item>
          <el-menu-item index="1-2" :route="{ name: RouterName.FeatureSet }" v-if="isAdmin()">
            <i class="el-icon-map-location"></i>
            <span>编辑地图</span>
          </el-menu-item>
          <el-menu-item index="1-3" :route="{ name: RouterName.VisionInfo }">
            <i class="el-icon-map-location"></i>
            <span>信息</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container @click="isCollapse = false">
        <el-header style="font-size: 12px">
          <span style="line-height: 60px;">
            <el-button @click="openEnum" v-if="!isCollapse">
              <el-icon>
                <MoreFilled />
              </el-icon>
            </el-button>
          </span>
          <span style="float:right">
            <span style="line-height: 60px;">
              <el-button @click="logout" circle size="large" style="font-size: 16px;float: right;margin: 8px"
                >
                <el-icon><SwitchButton/></el-icon>
              </el-button>
              <span style="height: 60px">
                <el-button @click="back()" circle size="large"><el-icon><Back/></el-icon></el-button>
              </span>
            </span>
          </span>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
    </el-container>
    
  </el-container>
    
 
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/stores/user';
import { getLastRoute, RouterName } from '@/router';
import { useRouter } from 'vue-router';

const userStore = useUserStore();
const router = useRouter()
const isCollapse = ref(false);

const isAdmin = () => {
  return userStore.authorities.includes('admin');
};
const openEnum=(event)=>{
  isCollapse.value = true;
  event.stopPropagation()
}
function logout() {
  userStore.logout();
  router.push({
    name: "Login"
  })
}
function back(){
  router.push({
    name:getLastRoute()
  })
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
</style>